<template>
  <view class="container">

	  <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" />

      <view class="content">
        <!-- 管理员信息 Tab -->
        <view v-if="current === 0">
          <view class="form-item">
            <label>账号：</label>
            <input v-model="admin.username" class="input-field" disabled />
          </view>
          <view class="form-item">
            <label>姓名：</label>
            <input v-model="admin.name" class="input-field" />
          </view>
          <view class="form-item">
            <label>联系电话：</label>
            <input v-model="admin.phone" class="input-field" />
          </view>
          <view class="form-item">
            <label>备注：</label>
            <input v-model="admin.notes" class="input-field" />
          </view>
          <view class="button-group">
            <uni-button type="primary" size="small" @click="saveInfo">保存</uni-button>
          </view>
        </view>

        <!-- 修改密码 Tab -->
        <view v-if="current === 1">
          <view class="form-item">
            <label>旧密码：</label>
            <input v-model="oldPassword" type="password" class="input-field" />
          </view>
          <view class="form-item">
            <label>新密码：</label>
            <input v-model="newPassword" type="password" class="input-field" />
          </view>
          <view class="form-item">
            <label>确认新密码：</label>
            <input v-model="confirmPassword" type="password" class="input-field" />
          </view>
          <view class="button-group">
            <uni-button type="primary" size="small" @click="changePassword">修改密码</uni-button>
          </view>
        </view>
      </view>
 
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['资料修改', '密码修改'],
      current: 0, // 当前选中的TAB索引
      admin: {
        username: 'admin',
        name: '管理员',
        phone: '18687431431',
        notes: ''
      },
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    };
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    saveInfo() {
      // 保存管理员信息的逻辑
      uni.showToast({
        title: '资料已保存',
        icon: 'success'
      });
    },
    changePassword() {
      if (this.newPassword !== this.confirmPassword) {
        uni.showToast({
          title: '新密码和确认密码不一致',
          icon: 'none'
        });
        return;
      }
      // 修改密码的逻辑
      uni.showToast({
        title: '密码修改成功',
        icon: 'success'
      });
      // 重置密码输入框
      this.oldPassword = '';
      this.newPassword = '';
      this.confirmPassword = '';
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #fff;
}

.uni-padding-wrap {
  padding: 0px 30px;
}

.uni-common-mt {
  margin-top: 30px;
}

.content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

label {
  width: 80px;
  /* 设定标签宽度 */
  color: #666;
  margin-right: 10px;
}

.input-field {
  flex: 1;
  /* 输入框占用剩余空间 */
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

uni-button {
  width: 100%;
}
</style>
